<template>
  <div class="box">
    <div class="mainBox" id="earlyStageChengGuoFuShenYj">
      <div class="tableBoxData">
        <div class="tableBoxData_title">区县综合验收意见表</div>
        <div class="tableBoxData_button_box">
          <el-button class="tableBoxData_button_box_item" :loading="downloadLoading" @click="download">下载</el-button>
          <!-- <el-button class="tableBoxData_button_box_item">地图显示</el-button> -->
        </div>
        <div class="tableBoxData_mainData">
          <el-table :data="dataList" v-loading="listLoading" border style="width: 100%">
            <el-table-column type="index" show-overflow-tooltip label="序号" width="80"></el-table-column>
            <el-table-column prop="qlr" label="权利人"></el-table-column>
            <el-table-column prop="sfzh" label="身份证号"></el-table-column>
            <el-table-column prop="lxdh" label="联系电话"></el-table-column>
            <el-table-column prop="pk" label="片块"></el-table-column>
            <el-table-column prop="xz" label="乡镇"></el-table-column>
            <el-table-column prop="csz" label="村/社/组"></el-table-column>
            <el-table-column prop="nczjdmj" label="农村宅基地面积(㎡)"></el-table-column>
            <el-table-column prop="nczjdfsydmj" label="农村宅基地附属用地面积(㎡)"></el-table-column>
            <el-table-column prop="jgysmj" label="竣工验收面积(㎡)"></el-table-column>
            <el-table-column prop="kcjxmj" label="扣除建新面积(㎡)"></el-table-column>
            <el-table-column prop="yydpjymj" label="用于地票交易面积(㎡)"></el-table-column>
            <el-table-column prop="qlrqz" label="权利人签字"></el-table-column>
            <!-- <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button size="mini" type="primary" @click="chakanItem(scope.row)">查看</el-button>
              </template>
            </el-table-column> -->
          </el-table>
        </div>
        <div class="tishi" style="margin-top:30px;">
          <p>注：1.用于地票交易面积竣工验收面积-扣除建新面积； 2.竣工验收面积=农村宅基地面积+农村宅基地附属用地面积</p>
        </div>
        <div class="tishi">
          <span>联系人：{{lxr == null || lxr == '' ? '暂无' : lxr}}</span>
          <span>联系电话：{{lxdh == null || lxdh == '' ? '暂无' : lxdh}}</span>
          <span>监督电话：{{jddh == null || jddh == '' ? '暂无' : jddh}}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryLaterMappingAreaNotification,queryLaterMappingAreaNotificationId } from "@/api/jungongAreaGongshi";
export default {
  data() {
    return {
      dataList:[],
      listLoading:false,
      lxr:'',
      lxdh:'',
      jddh:'',
      downloadLoading:false,
    };
  },
  mounted() {
    this.getData()
  },
  methods: {
    //下载
    download(){
      this.downloadLoading = true
      queryLaterMappingAreaNotificationId({projectId:localStorage.getItem("projectId")}).then(res =>{
        this.downloadLoading = false
        console.log(res,"康康文件")
        if(res.data){
          var a = document.createElement("a");
          a.setAttribute(
            "href",
            this.$https +
              "/pc/file/download?id="+ res.data
          );
          a.click();
        }
      }).catch(err =>{
        this.downloadLoading = false
      })
    },
    getData(){
      this.listLoading = true
      var data={
        projectId:localStorage.getItem("projectId")
      }
      queryLaterMappingAreaNotification(data).then(res =>{
        this.listLoading = false
        this.dataList = res.data.detailList
        this.lxr = res.data.lxr
        this.lxdh = res.data.lxdh
        this.jddh = res.data.jddh
      })
    },
  }
};
</script>

<style scoped >
.tishi{
  font-size: 14px;
  color: #999;
}
.tishi span{
  margin-right: 20px;
}
.box {
  padding: 30px;
}
#earlyStageChengGuoFuShenYj .tableBoxData_title {
  width: 100%;
  display: block;
  overflow: hidden;
  font-size: 20px;
  font-weight: bold;
  color: #444;
  text-align: center;
  margin-bottom: 10px;
}
.tableBoxData_button_box {
  width: 100%;
  display: flex;
  justify-content: center;
}
.tableBoxData_button_box_item {
  margin: 0px 20px;
  margin-bottom: 20px;
  margin-top: 10px;
}
#earlyStageChengGuoFuShenYj .table-doc-view {
  border-collapse: collapse;
}
#earlyStageChengGuoFuShenYj .table-doc-view tr,
.table-doc-view td {
  border: 1px solid #ccc;
  padding: 10px 10px;
}
#earlyStageChengGuoFuShenYj .table-doc-view tr,
.table-doc-view td {
  border: 1px solid #ccc;
  padding: 10px 10px;
}
#earlyStageChengGuoFuShenYj .table-doc-view td {
  font-size: 14px;
  color: #444;
  min-height: 30px;
}
#earlyStageChengGuoFuShenYj .table-doc-view .taoc-title {
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}
#earlyStageChengGuoFuShenYj .table-doc-view .taoc-center {
  text-align: center;
}

#earlyStageChengGuoFuShenYj .table-doc-view .taoc-pure-row {
    border:0 none;
    padding: 10px 0;
}
#earlyStageChengGuoFuShenYj .table-doc-view .taoc-pure-row td{
  border:0 none;
}
</style>